<template>
  <el-dialog
    title="上传文件"
    :close-on-click-modal="false"
    v-model="dataUploadVisible"
    width="500px"
    :before-close="handleClose"
    center
  >
    <el-upload
      ref="uploadRef"
      class="uploadItem"
      drag
      accept=".pdf,.doc,.docx,.png,.jpg,.txt,.md,.xlsx"
      :file-list="fileList"
      :on-remove="handleRemove"
      :on-change="onChange"
      :show-file-list="true"
      action="http://localhost:8991/jiai/common/upload"
      :limit="10"
      :auto-upload="false"
      :data="uploadReq"
      append-to-body
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <template #tip>
        <div class="el-upload__tip">
          支持.pdf,.doc,.docx,.png,.jpg,.txt,.md,.xlsx
        </div>
      </template>
    </el-upload>

    <template #footer>
      <div style="text-align: center; width: 100%">
        <el-button type="primary" style="width: 200px" @click="submitUpload"
          >提交</el-button
        >
        <el-button type="primary" style="width: 200px" @click="cancel()"
          >取消</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox, UploadInstance } from 'element-plus'
import { dataupload } from './dataupload'
import { rows } from '@/views/scheduleSettings/scheduleSetting'

const headerStr = {
  'Content-Type':
    'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
}

interface Props {
  dataUploadVisible?: boolean
}

const uploadRef = ref<UploadInstance>()

const submitUpload = () => {
  if (fileList.length === 0) {
    ElMessage.warning('请上传文件')
    return
  }
  uploadRef.value!.submit()
  ElMessage.success('上传成功')
  changeStatus(false)
}

const myProps = defineProps<Props>()
const { dataUploadVisible } = toRefs(myProps)

let fileList = toRefs([])

const uploadReq: dataupload = {
  scheduleId: '1',
  mkdir: '/default/file',
  clockTime: new Date(),
  useageHour: 0,
  remark: '',
  clockType: 1,
}

const handleClose = (done: () => void) => {
  changeStatus(!dataUploadVisible)
  fileList = []
  done()
}

const cancel = () => {
  changeStatus(false)
  fileList = []
}

const onChange = (file: any, files: never[]) => {
  fileList = files
}

const emit = defineEmits(['exportData'])

const changeStatus = (status: boolean) => {
  emit('exportData', status)
}

const initsObj = (row: rows) => {
  if (row) {
    uploadReq.scheduleId = row.id
  }
}

defineExpose({
  initsObj,
})

//文件移除配置方法
const handleRemove = (file: any, files: never[]) => {
  fileList = files
}
</script>
